<template>
  <el-card class="gz-tree">
    <el-tree
      show-checkbox
      :data="treeData"
      :props="{
        children: 'children',
        label: 'authName'
      }"
      @node-click="handleNodeClick"
    />
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { getRoleList } from "@/api/role";
// import { ElMessage, ElMessageBox } from "element-plus";
// import { useI18n } from "vue-i18n";
import { ElLoading } from "element-plus/lib/components/loading";

const loading = ref(null);
// const i18n = useI18n();
const treeData = ref(null);
const startLoading = () => {
  loading.value = ElLoading.service({
    target: document.querySelector(".gz-tree"),
    lock: true,
    text: "数据加载中..."
    // background: "rgba(0, 0, 0, 0.8)"
    // spinner: "el-icon-loading"
  });
};

const endLoading = () => {
  loading.value && loading.value.close();
};

const getRole = async () => {
  startLoading();
  treeData.value = await getRoleList();
  treeData.value.map((t) => (t.authName = t.roleName));
  console.log(treeData.value);
  endLoading();
};
getRole();
</script>

<style lang="scss" scoped></style>
